<template>
    <div :style='{"width":"100%","margin":"20px","overflowX":"auto","overflowY":"hidden","paddingBottom":"30px"}' class="szStep">
        <el-steps :active="index" finish-status="success"  v-if="show" align-center :style="{'width':widths}" >
    
        <el-step :title="item.val" v-for="(item,index) in datas "   :key="index" :description="item.remark"></el-step>
        </el-steps>
    </div>
</template>
<script>
export default {
    name:"szSteps",
    props:["data","id"],
    data(){
        return{
            sId:"",
            pId:"",
            cId:"",
            show:false,
            index:0,
            datas:[],
            widths:"100%"
        }
    },
    created(){
        let ids=this.id.split(".");
        this.pId=ids[0];
        this.cId=ids[1];
        this.sId=this.data[this.pId][this.cId];
        this.loadData();
        
    },
    methods:{
        loadData(){
            this.$post("bygex","/byg/sz/getStatus",{sId:this.sId}).then(data=>{
                this.index=data.index;
                this.datas=data.data;
                if(this.datas.length>10){
                    let width=this.datas.length*100;
                    this.widths=width+"px";
                }
                this.show=true;
            })
        }
    }
}
</script>
<style scoped>
.szStep>>>.el-steps{
  
}
.szStep>>>.el-step{
    max-width:200px !important;
    width:110px;
}
.szStep>>>.el-step.is-center .el-step__description{
    padding-left:10%;
}
.szStep>>>.el-step__title{
    font-size:14px;
}
</style>